<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dev: Network</title>
  <link href="../example/lib/weui.min.css" rel="stylesheet"/>
  <link href="../example/lib/demo.css" rel="stylesheet"/>

  <script src="../dist/vconsole.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body ontouchstart>
  <div class="page">
    <a onclick="getAjax()" href="javascript:;" class="weui_btn weui_btn_default">getAjax</a>
    <a onclick="postAjax()" href="javascript:;" class="weui_btn weui_btn_default">postAjax</a>
    <a onclick="getFetch()" href="javascript:;" class="weui_btn weui_btn_default">getFetch</a>
    <a onclick="getFetchSimple()" href="javascript:;" class="weui_btn weui_btn_default">getFetch(simple)</a>
    <a onclick="postFetch()" href="javascript:;" class="weui_btn weui_btn_default">postFetch</a>
    <a onclick="postFetchByRequest()" href="javascript:;" class="weui_btn weui_btn_default">postFetchByRequest</a>
    <a onclick="getFetchText()" href="javascript:;" class="weui_btn weui_btn_default">getFetchText</a>
    <a onclick="postImage()" href="javascript:;" class="weui_btn weui_btn_default">postImage</a>
    <a onclick="sendBeacon()" href="javascript:;" class="weui_btn weui_btn_default">sendBeacon</a>
    <a onclick="axiosRequest('GET')" href="javascript:;" class="weui_btn weui_btn_default">getAxios</a>
    <a onclick="optionsXHR()" href="javascript:;" class="weui_btn weui_btn_default">optionsXHR</a>
    <a onclick="optionsFetch()" href="javascript:;" class="weui_btn weui_btn_default">optionsFetch</a>
    <a onclick="loadImgError()" href="javascript:;" class="weui_btn weui_btn_default">loadImgError</a>
    <a onclick="loadScriptError()" href="javascript:;" class="weui_btn weui_btn_default">loadScriptError</a>
    <a onclick="loadVideoError()" href="javascript:;" class="weui_btn weui_btn_default">loadVideoError</a>
    <a onclick="loadLinkError()" href="javascript:;" class="weui_btn weui_btn_default">loadLinkError</a>
    <a onclick="loadAudioError()" href="javascript:;" class="weui_btn weui_btn_default">loadAudioError</a>
  </div>
</body>
</html>

<script>
window.vConsole = new window.VConsole({
  maxLogNumber: 1000,
  // disableLogScrolling: true,
  onReady: function() {
    console.log('vConsole is ready.');
  }
});

// setInterval(() => {
//   postAjax();
// }, 300);

function postAjax() {
  console.info('postAjax() Start, response should be logged after End');
  const xhr = new XMLHttpRequest();
  xhr.onload = () => {
    console.log('postAjax Response:', JSON.parse(xhr.response));
  };
  xhr.onerror = () => {
    console.log('postAjax Error');
  };
  xhr.onreadystatechange = () => {
    console.log('onreadystatechange', `readyState=${xhr.readyState}`, `status=${xhr.status}`);
  };
  xhr.open('POST', './data/large.json?method=fetchPost&c=中文');
  xhr.send({
    foo: 'bar',
    id: `${Math.random()}${Math.random()}${Math.random()}${Math.random()}${Math.random()}${Math.random()}`,
    type: 'xhr',
    '<xss0>': '<xss1> XSS Attack!'
  });
  // xhr.send(JSON.stringify({foo: 'bar', id: Math.random(), '<xss0>': '<xss1> XSS Attack!'}));
  console.info('postAjax() End');
}

function getAjax() {
  console.info('getAjax() Start, response should be logged after End');
  const url = window.location.origin + '/dev/data/success.json?method=xhrGet&id=' + Math.random() + '&<xss0>';
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.setRequestHeader('custom-header', 'foobar');
  xhr.send();
  xhr.onload = () => {
    console.log('getAjax Response:', JSON.parse(xhr.response));
  };
  xhr.onerror = () => {
    console.log('getAjax Error');
  };
  console.info('getAjax() End');
}

function getFetch() {
  console.info('getFetch() Start, response should be logged after End');
  window.fetch('./data/success.json?method=fetchGet&id=' + Math.random(), {
    method: 'GET',
    headers: {
      'custom-header': 'foobar',
      'content-type': 'application/json'
    },
  }).then((data) => {
    return data.json();
  }).then((data) => {
    console.log('getFetch Response:', data);
  });
  console.info('getFetch() End');
}

function getFetchSimple() {
  console.info('getFetchSimple() Start, response should be logged after End');
  window.fetch('./data/success.json?type=fetchGet&id=' + Math.random()).then((data) => {
    return data.json();
  }).then((data) => {
    console.log('getFetchSimple Response:', data);
  });
  console.info('getFetchSimple() End');
}

function postFetch() {
  console.info('postFetch() Start, response should be logged after End');
  window.fetch('./data/success.json?method=fetchPost', {
    method: 'POST',
    body: { foo: 'bar', id: Math.random(), type: 'fetch' },
    // body: new Blob([new ArrayBuffer(233)], { type: 'image/png' }),
    headers: {
      'custom-header': 'foobar',
      // 'content-type': 'application/json'
      // 'content-type': 'application/x-www-form-urlencoded'
      'content-type': 'multipart/form-data',
      'xss': '<xss1> XSS Attack!'
    },
  }).then((data) => {
    return data.json();
  }).then((data) => {
    console.log('postFetch Response:', data);
  }).catch((error) => {
    console.error('postFetch Error:', error);
  });
  console.info('postFetch() End');
}

function postFetchByRequest() {
  console.info('postFetchByRequest() Start, response should be logged after End');
  const headers = new Headers();
  headers.append('custom-header', 'foobar');
  // headers.append('content-type', 'application/json');
  headers.append('content-type', 'application/x-www-form-urlencoded');
  const req = new Request('./data/success.json?method=fetchPost&id=' + Math.random(), {
    method: 'POST',
    body: { foo: 'bar', id: Math.random() },
    // body: new Blob([new ArrayBuffer(233)], { type: 'image/png' }),
    headers: headers,
  });
  window.fetch(req).then((data) => {
    return data.json();
  }).then((data) => {
    console.log('postFetchByRequest Response:', data);
  }).catch((error) => {
    console.error('postFetchByRequest Error:', error);
  });
  console.info('postFetchByRequest() End');
}


function getFetchText() {
  console.info('getFetchText() Start, response should be logged after End');
  window.fetch('./data/success.txt?type=fetchGet&id=' + Math.random(), {
    method: 'GET',
    headers: {
      'custom-header': 'foobar',
      'content-type': 'application/json'
    },
  }).then((data) => {
    return data.text();
  }).then((data) => {
    console.log('getFetchText Response:', data);
  });
  console.info('getFetchText() End');
}

function postImage() {
  console.info('postImage() Start, response should be logged after End');
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '../example/snapshot/panel_log.jpg?method=xhrPost&id=' + Math.random());
  xhr.send();

  window.fetch('../example/snapshot/qrcode.png?method=fetchPost&id=' + Math.random(), {
    method: 'POST',
  });
  console.info('postImage() End');
}

function sendBeacon() {
  console.info('sendBeacon() Start, response should be logged after End');
  window.navigator.sendBeacon('./data/success.json?method=beacon', JSON.stringify({
    foo: 'bar',
    id: Math.random(),
    type: 'sendBeacon'
  }));
  console.info('sendBeacon() End');
}

function axiosRequest(method) {
  console.info('axiosRequest() Start');
  axios({
    method,
    url: './data/success.json?method=axios&r=' + Math.random(),
    headers: { 'content-type': 'application/x-www-form-urlencoded' },
    data: {
      foo: 'bar'
    }
  })
  .then(function(response) {
    console.log('axiosRequest response:', response);
  })
  .catch(function(error) {
    console.log('axiosRequest error:', error);
  });
  console.info('axiosRequest() End');
}

function sendBeacon() {
  console.info('sendBeacon() Start, response should be logged after End');
  window.navigator.sendBeacon('./data/success.json?method=beacon', JSON.stringify({
    foo: 'bar',
    id: Math.random(),
    type: 'sendBeacon'
  }));
  console.info('sendBeacon() End');
}

function axiosRequest(method) {
  console.info('axiosRequest() Start');
  axios({
    method,
    url: './data/success.json?method=axios&r=' + Math.random(),
    headers: { 'content-type': 'application/x-www-form-urlencoded' },
    data: {
      foo: 'bar'
    }
  })
  .then(function(response) {
    console.log('axiosRequest response:', response);
  })
  .catch(function(error) {
    console.log('axiosRequest error:', error);
  });
  console.info('axiosRequest() End');
}

function optionsXHR() {
  console.info('optionsXHR() Start');
  const url = window.location.origin + '/dev/data/a.json?method=optionsXHR&s=500&id=' + Math.random() + '&<xss0>';
  const xhr = new XMLHttpRequest();
  xhr.open('OPTIONS', url);
  xhr.setRequestHeader('custom-header', 'foobar');
  xhr.send();
  xhr.onload = () => {
    console.log('optionsXHR Response:', xhr.response);
  };
  xhr.onerror = () => {
    console.log('optionsXHR Error');
  };
  console.info('optionsXHR() End');
}

function optionsFetch() {
  console.info('optionsFetch() Start');
  window.fetch('./data/a.json?method=optionsFetch&s=403&t=300', {
    method: 'OPTIONS',
  }).then((data) => {
    console.log('optionsFetch Response:', data);
  }).catch((error) => {
    console.error('optionsFetch Error:', error);
  });
  console.info('optionsFetch() End');
}

function loadImgError() {
  console.info('loadImgError() Start');
  const img = new Image();
  img.src = 'http://xxxx.jpg';
  document.body.appendChild(img);
  img.onerror = () => {
    console.info('loadImgError() End');
  }
}

function loadScriptError() {
  console.info('loadScriptError() Start');
  const scri = document.createElement("script");
  scri.src = 'http://xxxx.js';
  document.body.appendChild(scri);
  scri.onerror = () => {
    console.info('loadScriptError() End');
  }
}

function loadVideoError() {
  console.info('loadVideoError() Start');
  const vid = document.createElement("video");
  vid.src = 'http://xxxx.mp4';
  document.body.appendChild(vid);
  vid.onerror = () => {
    console.info('loadVideoError() End');
  }
}

function loadLinkError() {
  console.info('loadLinkError() Start');
  const link = document.createElement("link");
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = './data/a.css?s=404';
  document.body.appendChild(link);
  link.onerror = () => {
    console.info('loadLinkError() End');
  }
}

function loadAudioError() {
  console.info('loadAudioError() Start');
  const audio = document.createElement("Audio");
  audio.src = 'http://xxxx.mp3';
  document.body.appendChild(audio);
  audio.onerror = () => {
    console.info('loadAudioError() End');
  }
}

</script>